<template>
  <div id="comSeeker">
    <el-container style="height: 100vh; border: 1px">
      <el-header>
        <el-row>
          <el-col :span="2"
            ><div class="grid-content bg-purple">聘途</div></el-col
          >
          <el-col :span="2" :offset="20"
            ><div class="grid-content bg-purple">
              <el-button
                style="font-size: large; color: black"
                type="text"
                @click="Loginout"
                >退出登录</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <Sidebar></Sidebar>
        </el-aside>
        <el-main>
          <!-- 筛选 -->
          <el-row>
            <el-col :span="2" style="margin-top: 10px"
              ><div class="grid-content bg-purple">学历筛选:</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple-light">
                <el-select v-model="valueEdu" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.valueEdu"
                    :label="item.label"
                    :value="item.valueEdu"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
          </el-row>
          <!-- 推荐牛人 -->
          <el-table
            :data="formattedTableData"
            style="margin-top: 20px"
            :span-method="spanMethod"
          >
            <!-- 牛人信息 -->
            <el-table-column width="1250px">
              <template slot-scope="scope">
                <div v-if="shouldShowRow(scope.row)">
                  <el-descriptions style="margin-bottom: 0; font-size: large">
                    <el-descriptions-item label="姓名">{{
                      scope.row.sname
                    }}</el-descriptions-item>
                    <el-descriptions-item label="学历">{{
                      scope.row.sedu
                    }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{
                      scope.row.sgender
                    }}</el-descriptions-item>
                    <el-descriptions-item label="电话">{{
                      scope.row.sphone
                    }}</el-descriptions-item>
                  </el-descriptions>
                </div>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column width="300px">
              <template slot-scope="scope">
                <div v-if="shouldShowRow(scope.row)">
                  <!-- 查看简历 -->
                  <el-button
                    size="small"
                    type="primary"
                    @click="lookSeekerCv(scope.row)"
                    >查看简历</el-button
                  >
                  <!-- 打招呼 -->
                  <el-button size="small" type="success">打招呼</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 查看个人简历 -->
          <el-dialog :title="diatitle" :visible.sync="dialogTableVisible">
            <pre style="font-size: x-large">{{ seekercv }}</pre>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
<script>
import axios from "axios";
import Sidebar from "@/components/CompanySidebar.vue";
import { EventBus } from '@/util/event-bus.js';
export default {
  components: {
    Sidebar,
  },
  created() {
    this.fetchtableData();
  },
  data() {
    return {
      CompanyUserData: JSON.parse(sessionStorage.getItem("CompanyUser")),
      tableData: [],
      seekercv: "",
      diatitle: "",
      dialogTableVisible: false,
      options: [
        {
          valueEdu: "选项1",
          label: "全部",
        },
        {
          valueEdu: "选项2",
          label: "博士",
        },
        {
          valueEdu: "选项3",
          label: "研究生",
        },
      ],
      valueEdu: "选项1",
    };
  },
  methods: {
    closeWebSocket() {
      EventBus.$emit('close-websocket-company');
    },
    //空白行处理
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.shouldShowRow(row)) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
      return {
        rowspan: 1,
        colspan: 1,
      };
    },
    fetchtableData() {
      axios
        .post("http://localhost:8080/hqdx/company/showTenSeeker")
        .then((response) => {
          this.tableData = response.data.data.items;
        })
        .catch((error) => {
          console.error("There was an error fetching the people!", error); // 错误处理
        });
    },
    lookSeekerCv(row) {
      this.diatitle = row.sname + "的个人简历";
      this.dialogTableVisible = true;
      let data = new FormData();
      data.append("sinfo", row.sinfo);
      axios
        .post("http://localhost:8080/hqdx/seeker/showSeekerCv", data)
        .then((response) => {
          this.seekercv = response.data.data.items;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    convertSeduToString(value) {
      switch (value) {
        case 1:
          return "小学";
        case 2:
          return "初中";
        case 3:
          return "高中";
        case 4:
          return "大学";
        case 5:
          return "研究生";
        case 6:
          return "博士";
        default:
          return ""; // 处理未知的 sedu 值
      }
    },
    shouldShowRow(row) {
      if (this.valueEdu === "选项1") return true;
      if (this.valueEdu === "选项2") {
        if (row.sedu === "博士") return true;
        else return false;
      }
      if (this.valueEdu === "选项3") {
        if (row.sedu === "研究生") return true;
        else return false;
      }
    },
    Loginout() {
      this.closeWebSocket();
      let data = new FormData();
      data.append("cusername", this.CompanyUserData.cusername);
      axios
        .post("http://localhost:8080/hqdx/company/loginout", data)
        .then((response) => {})
        .catch((error) => {
          console.log(error);
        });
      this.$router.push("/login");
      sessionStorage.setItem("LoginComState", JSON.stringify(false)); //退出登录，状态记录
    },
  },
  computed: {
    formattedTableData() {
      // 使用 map 方法遍历 tableData 数组，将 sedu 转换为对应的学历字符串
      return this.tableData.map((item) => {
        return {
          ...item, // 使用对象的展开语法复制所有原始属性
          sedu: this.convertSeduToString(item.sedu), // 调用方法将 sedu 转换为学历字符串
        };
      });
    },
  },
};
</script>
    <style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background: linear-gradient(to top, #ffffff, #e0f7fa);
  /* background-color: #e9eef3; */
  text-align: center;
}

/* 不清楚作用 */
body > .el-container {
  margin-bottom: 40px;
}
</style>